<template>
  <!--
  查：
    1：定义api
    2:导入api
    3:进入页面请求api
    4:存储数据并渲染
    5：如果有分页：要与分页建立关联
        页码
        页容量
        总数
        页码与页容量改变都要重新请求

      table渲染树形数据
        1：数据中要有children
        2:el-table row-key='数据内的唯一标识的字段名'

   增：
     1：创建新增弹框组件
     2：导入注册使用
     3：点击新增打开弹框
     4：完成弹框内的布局
     5：表单处理（表单数据，表单验证）
     6：定义新增api
     7:导入新增api
     8:点击确定在表单验证通过后调用api
     调用成功
       提示
       关闭弹框
       清空表单数据与验证
       刷新父级列表

    改：
      1：点击编辑打开弹框
      2：数据回显（数据深拷贝）
      3：在弹框组件内创建一个mode变量用于区分场景
      4：在点击新增与编辑都要修改mode的值
      5：标题调整
      6：表单调整（数据或者表单验证等）
      7：定义编辑api
      8:导入编辑api
      9:点击确定分场景调用api
        调用成功
         a:提示
         b:关闭弹框
         c:清空表单数据与验证
         d:刷新父级列表数据

    删除
     1:点击删除弹出确认框
     2：定义删除api
     3:导入删除api
     4:点击确认框的确定按钮调用删除api
      调用成功
        a:提示
        b:刷新列表（如果有分页：如果页码>1  && 当前页只有一条数据  页码-- 再刷新）

    没有新增的编辑
     1：创建一个弹框组件
     2：导入注册使用
     3：点击按钮打开弹框
     4：调用一个接口获取数据存储渲染（包括布局，如果有表单验证要处理还是需要处理）
     5：数据回显
         a:表格中点击编辑时能直接拿到当前行数据且包含编辑的数据==>深拷贝
         b:拿不到要编辑数据==>调用接口获取数据并渲染
     6：定义编辑api
     7:导入编辑api
     8:点击确定调用编辑
       调用成功
         a:提示
         b:关闭弹框
         c:清空表单数据与验证
         d:刷新列表（关键看父级有没有该数据处理）

 -->

  <div class="permission">
    <el-card>
      <div class="right">
        <el-button type="primary" size="mini" @click="addEvent">添加权限</el-button>
      </div>
    </el-card>
    <el-table :data="list" class="table" border row-key="id">
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="code" label="标识" align="center" />
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{row}">
          <el-button v-if="row.type===1" type="text" @click="addEvent2(row.id)">添加</el-button>
          <el-button type="text" @click="editEvent(row)">编辑</el-button>
          <el-button type="text" @click="delEvent(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  新增弹框 -->
    <!-- <Add :value="isShow" @input="isShow=$event" /> -->
    <Add ref="add" v-model="isShow" @getData="getData" />
  </div>
</template>
<script>
import { sysPermission, sysPermissionDelete } from '@/api/permission'
import Add from './components/add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: [],
      isShow: false

    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysPermission()
      this.list = this.changeData(res.data)
      // console.log('权限列表数据', res)
      console.table(res.data)
    },
    changeData(arr, pid = '0') {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击事件
    addEvent() {
      // 打开弹框
      this.isShow = true
      // 需求问题
      this.$refs.add.form.type = 1
      this.$refs.add.form.pid = '0'
      this.$refs.add.mode = 'add'
    },
    addEvent2(id) {
      // 打开弹框
      this.isShow = true
      // 需求问题
      this.$refs.add.form.type = 2
      this.$refs.add.form.pid = id
      this.$refs.add.mode = 'add'
    },
    // 编辑事件
    editEvent(row) {
      // 打开弹框
      this.isShow = true
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.mode = 'edit'
      console.log(row)
    },
    // 删除事件
    async delEvent(id) {
      await this.$confirm('您确定删除该项吗?', '温馨提示')
      await sysPermissionDelete(id)
      this.$message.success('删除权限点成功')
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
.permission{
  padding:15px;
  .right{
    text-align: right;
  }
  .table{
    margin-top:15px;
  }
}
</style>
